<!-- span标签不换行，p标签换行 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人介绍</title>
  <link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
  <!-- 导航 -->
  <div class="header">
    <!-- logo -->
    <div class="logo">
      <h3>月下仙连的个人网页</h3>
    </div>
    <!-- 导航栏 -->
    <div class="nav"> 
      <a href="index.html">首页</a>
      <a href="about.html" class="active">个人介绍</a>
      <a href="offering.html">个人作品</a>
      <a href="dailyLife.html">日常生活</a>
      <a href="contactMe.html">联系我</a>
    </div>
  </div>
  <!-- 内容区域 -->
   <div class="about"> 
    <div class="about-info">
      <!-- 个人信息 -->
      <h3 class="about-title">[个人信息」</h3>
      <div class="about-con">
        <div class="about-text1">
          <p>姓名：仙连</p>
          <p>性别：男</p>
          <p>年龄：18</p>
          <p>班级：230719</p>
        </div>
        <div class="about-img"> 
          <img src="img/me2.jpg" alt="">
          <img src="img/me3.jpg" alt="">
        </div>
      </div>
      <!-- 个人爱好 --> 
      <div class="about-like"> 
        <h3 class="about-title">[个人爱好」</h3>
        <div class="about-text2"> 
            <span>游戏</span>
            <span>运动</span>
            <span>旅行</span>
            <span>音乐</span>
            <span>动漫</span>
        </div>
      </div>
      <!-- 个人技能 -->
       <div class="about-skill">
        <h3 class="about-title">[个人技能」</h3>
        <div class="about-text3">
          <img src="img/c.png" alt="C语言" title="C语言">
          <img src="img/java.png" alt="Java" title="Java">
          <img src="img/html.png" alt="HTML" title="HTML">
          <img src="img/css.png" alt="CSS" title="CSS">
          <img src="img/js.png" alt="JavaScript" title="JavaScript">
        </div>
       </div>
    </div>
   </div>
   <!-- 底部 -->
    <div class="footer">
      <p>Copyright © 2020. All rights reserved.</p>
    </div>
</body>
</html>